<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">
      <van-swipe-cell v-for="item in store.cartList" :key="item.id">
        <van-card
          :num="item.count"
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
        >
        <template #tag>
            <van-checkbox v-model="item.checked"></van-checkbox>
        </template>
          <template #footer>
            <button @click="item.count--" :disabled="item.count==1">-</button>
            {{item.count}}
            <button @click="onAdd(item.id,item.count)">+</button>
        </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="deleteItem(item.id)"
          />
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="1" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allChecked">全选</van-checkbox>
 
</van-submit-bar>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import throttle from '@/utils/throttle'
const store = useCounterStore();
import {computed} from 'vue'

const deleteItem = (id) => {
  store.delItem(id);
};

const onAdd=throttle((id,count)=>{
  store.updateCount(id,count+1)
},2000)

const allChecked=computed({
  get(){
    if(store.cartList.length==0)
    {
      return false
    }else{
      return store.cartList.every(item=>item.checked==true)
    }
  },
  set(value){
     store.cartList.forEach(item=>item.checked=value)
  }
})
</script>

<style lang="scss" scoped>
.van-submit-bar {
  bottom: 50px;
}
</style>